<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
 <meta name="description" content="W3C SVG 1.1 Test Suite"/>
 <title>
SVG 1.1 test:coords-units-02-b </title>
 <style type="text/css">
 <!--
 body { font-family: "Lucida Grande", verdana, helvetica, sans-serif; line-height: 1.3; text-align: left; margin-top: 0; margin-bottom: 0 }
 .pageTitle { line-height: 1.5; font-weight: bold; margin-bottom: 1em;}
 .pageSubTitle  { color: blue; font-size: 200%; font-weight: bold }
 .openChapter { color: blue; line-height: 1.3; font-weight: bold }
 .openSection { color: blue; line-height: 125%; font-weight: bold }
 .info { color: black; line-height: 1.2; font-size: 90%; }
 p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .linkbar { text-align: center; margin: 1em 1em 0.25em 1em;}
 blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .opscript {margin-left: 3%; margin-right: 3%; }
 .opscript p { margin-top: 0.7em}
 .navbar {background: black; color: white; font-weight: bold}
 -->
 </style>
 </head>
 <body class="bodytext">

	<div class="linkbar"> 
<p>
<a href="full-coords-units-02-b.html">Full version</a>, <a href="basic-coords-units-02-b.html">Basic version</a></p>
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVG11/coords.html#Units">7.10 Units</a></p>
 <p>
				<a href="basic-coords-units-01-b.html">coords-units-01-b ←</a> 
				<a href="basic-index.html">index</a>
				<a href="basic-coords-units-03-b.html">→ coords-units-03-b</a>
						</p></div>

	<table align="center" border="0" cellspacing="0" cellpadding="10">
		<tr>
			<td align="center" colspan="3">
				<table border="0" cellpadding="8">
					<tr>
						<td align="center" colspan="2" class="pageTitle">
							<h1>coords-units-02-b</h1>
						</td>
					</tr>
					<tr  class="navbar">
						<td align="center">
							SVG Image
						</td>
						<td align="center">
							PNG Image
						</td>
					</tr>
					<tr>
						<td align="right">
   	    		  			
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            codebase="" id="mySVGViewerObj" width=160 height=120>
    <param name=movie value="../SvgViewer.swf">
    <param name="FlashVars" value="sourceType=url_svg&svgURL=../svggen/coords-units-02-b.svg">
    <param name="wmode" value="transparent">
    <embed play=false name="mySVGViewerObj" 
	    src="../SvgViewer.swf" quality=high wmode="transparent"
	    width=160 height=120 type="application/x-shockwave-flash"
	    FlashVars="sourceType=url_svg&svgURL=../svggen/coords-units-02-b.svg">
    </embed >
</object>
						</td>
						<td align="left">
							<img alt="raster image of coords-units-02-b" src="../png/basic-coords-units-02-b.png" width="160" height="120"/>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

               
<div class="opscript">
         <p>
         Verify the conversion processing of CSS units and percentage values for both
         coordinates and length values. Note that the test uses the CSS px unit to be usable
         in all pixel resolutions. Hence, the conversion from other CSS units to CSS px is
         left out of the test.
      </p>
      <p>
         There are six atomic tests in this test. For each, the approach is to draw two similar 
         elements (circles or rects) with coordinates specified in user space for one and in
         CSS units or percentage for the other. Each test is such that these two values (or
         value pairs) should match.
      </p>
      <p>
         For example, in the first two tests, that validate coordinate processing, the circles
         should have the same center. In the following two tests, the rectangles should have 
         the same height and width. And finally, in the last test, the 3 circles should have the
         same radius.
      </p>
      <p>
         The rendered image should match the reference image except for the text which may
         show minor differences, per CSS2 rules for font selection and matching.
      </p>

		</div>
<div class="linkbar"> <p>
				<a href="basic-coords-units-01-b.html">coords-units-01-b ←</a>
				<a href="basic-index.html">index</a>
				<a href="basic-coords-units-03-b.html">→ coords-units-03-b</a>
						</p></div>
</body>
</html>
